<template>
    <div style="display:flex;flex-wrap:wrap;" >
      <div v-for="(item,index) in imagesList" :key="index"  class="divimg" >
            <van-icon name="clear"
                @click="delImg(index)" class="clear"/>
           <img :src="item.content" alt=""  class="itemimg">
      </div>
       <ul class="fix" align="left">
      <van-uploader multiple :after-read="onRead"  preview-size="5.25rem" >
          <li class="add_img">
            <img src="../assets/img/add.png" alt  class="changeimg"/>
          </li>
      </van-uploader>
     </ul>
   </div>
 
</template>

<script>
  export default {
    name:'Upload',
    data() {
      return {}
    },
    mounted() {
    },
    props: {
      imagesList: {
        type: Array,
        default: []
      },
    },
    watch: {
      // imagesList(curVal) {
      //   this.$emit('postImagesList', curVal)
      // },
    },
    methods: {
      onRead(file) {
        let that = this;
        console.log(this.imagesList);
        if (Array.isArray(file)) {
          file.forEach((item) => {
            that.ontpys_w(item);
          })
        } else {
          that.ontpys_w(file);
        }
      },
      delImg(index) {
        this.imagesList.splice(index, 1);
      },
      ontpys_w(file) {
        // console.log('file1' + file.content);
        let img = new Image();
        img.src = file.content;
        let that = this;
        img.onload = function () {
          that.ontpys(img);
        }
      },
      //压缩图片的方法
      ontpys(img) {
        console.log('file2' + img);
        let originWidth = img.width, // 压缩后的宽
          originHeight = img.height,
          maxWidth = 1200, maxHeight = 1200,
          quality = 0.5, // 压缩质量
          canvas = document.createElement('canvas'),
          drawer = canvas.getContext("2d");
        canvas.width = maxWidth;
        canvas.height = originHeight / originWidth * maxWidth;

        drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
        let base64 = canvas.toDataURL("image/jpeg", quality); // 压缩后的base64图片
        let file = this.dataURLtoFile(base64, Date.parse(Date()) + '.jpg');
        file = {content: base64, file: file};
        // console.log('file3' + file.content);//压缩后的file
        this.imagesList.push(file);
        console.log(file)
        // return file
      },
      dataURLtoFile(dataurl, filename) {
        let arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type: mime});
      },
       delImg(index) {
        this.imagesList.splice(index, 1);
      },
    }
  }
</script>

<style  scoped>
/* li.add_img {
  padding: 1.65rem 1.7rem;
  background: #ededed;
  border-radius: 0.25rem;
}
li.add_img img {
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
}
.itemimg{
  width:5.4rem;height: 5.3rem;
}
.divimg{
  width:5.4rem;height: 5.3rem;margin-right:0.3rem;margin-bottom:0.2rem;position:relative;
}
.clear{
  position:absolute;left:4.5rem
} */
li.add_img {
  padding: 0.675rem 0.675rem;
  background: #ededed;
  border-radius: 0.25rem;
}
li.add_img img {
  width: 0.8rem;
  height: 0.8rem;
  margin: 0 auto;
}
.itemimg{
  width:2.15rem;height: 2.15rem;
}
.divimg{
  width:2.15rem;height: 2.15rem;margin-right:0.1rem;margin-bottom:0.2rem;position:relative;
}
.divimg:nth-child(3n){
  width:2.15rem;height: 2.15rem;margin-right:0;margin-bottom:0.2rem;position:relative;
}
.clear{
  position:absolute;left:1.85rem
}
@media (min-width: 800px) {
li.add_img {
  padding: 1.65rem 1.7rem;
  background: #ededed;
  border-radius: 0.25rem;
}
li.add_img img {
  width: 1rem;
  height: 1rem;
  margin: 0 auto;
}
.itemimg{
  width:4.5rem;
  height:4.5rem;
}
.divimg{
  width: 4.5rem;
  height:4.5rem;
}
.clear{
  left:3.8rem;
}
}
</style>
